<script>
import RaddarChart from "@/views/dashboard/RaddarChart.vue";
import {listClassificationUser} from "@/api/quality/classificationData";

export default {
  components: { RaddarChart },
  props: {
    userName: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      options: [],
      show: false,
      radData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        itemsId: null,
        userId: null,
      },
    }
  },
  computed: {
    propName() {
      return this.userName;
    },
  },
  mounted() {
    this.getRadData();
  },
  beforeDestroy() {
    this.reset();
  },
  methods: {
    async getRadData() {
      try {
        this.queryParams.userId = this.propName;
        const res = await listClassificationUser(this.queryParams);

        this.options = [{
          radar: {
            indicator: res,
          },
        }];

        const value = Object.values(res).map(item => item.score);
        this.radData = [
          {
            value: value,
            name: '能力分布图',
          },
        ];

        this.show = true;
      } catch (error) {
        console.error('Error fetching classification data:', error);
      }
    },
    reset() {
      this.options = [];
      this.radData = [];
      this.show = false;
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        itemsId: null,
        userId: null,
      }
    },
  }
}
</script>

<template>
  <div class="page">
    <RaddarChart v-if="show" height="798px" :options="options" :radData="radData"/>
  </div>
</template>

<style scoped lang="scss">
/* 在这里可以添加样式 */
.page {
  padding: 18px;
}
</style>
